<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>字体</title>
<style type="text/css">
	p {
		font-variant: normal;
		font-family: arial;
		font-stretch:condensed;
		}
		span.small_caps{
			font-variant: small-caps;
		}
		p.underline{
			text-decoration:underline;		
		}
		p.overline{
			text-decoration: overline;		
		}
		p.line-through{
			text-decoration: line-through;		
		}
		p.blink{
			text-decoration: blink;		
		}
		p.wider{
			letter-spacing: 10px;		
		}
		p.word_wider{
			word-spacing: 20px;		
		}
		p.one:first-letter{
			font-size: 42px;		
		}
		p.one_line:first-line{
			font-weight: bold;		
		}
		p.here{
			font-family: arial,verdana,sans-serif;		
		}
		
		p.here+div>p{
				border:1px solid #000;
				width: 500px;
		}
		
		div p+p+p{
			background-color: #999;
		}
		p[foo^="box"]{
			border:2px solid red;		
		}
		p[foo*="on"]{
			background-color: yellow;		
		}
		p[foo$="ed"]{
			background-color: blue;		
		}
		p.abstract:after{
			content: "hello content!!!";
			color: red;
			border:2px dashed grey;
			cursor: help;
		}
</style>
</head>
<body>
	<p>
		This is a normal font,but then <span class="small_caps">there are some small
		caps</span> in the middle.	
	</p>
	<p class="underline">
		hello world!!!
	</p>
	<p class="overline">
		hello world!!!	
	</p>
	<p class="line-through">
		hello world!!!	
	</p>
	<p class="blink">
		hello world!!!
	</p>
	<p class="underline overline line-through">
		hello world!!!
	</p>
	<p style="text-shadow: 0.3em 0.3em 0.5em red;">
		hello world!!!	
	</p>
	<p class="wider">
		hello world!!!	
	</p>
	<p class="word_wider">
		hello world!!!	
	</p>
	<p class="one">
		hello world!!!	
	</p>
	<p class="one_line">
		hello world!!! <br />
		hello hopy!!! <br />
		hello BBS!!!
	</p>
	<p class="here">Here is an example of some adjacent sibling and child selectors.</p>
	<div>
		<p>One</p>
		<p>Two</p>
		<p>Three</p>
		<p>Four</p>
		<p>Five</p>
	</div>
	<p foo="vbox">hello world</p>
	<p foo="box_best">hello world</p>
	<p foo="hello_on_me">hello on me</p>
	<p foo="fled">hello fled!!!</p>
	<p class="abstract">
		hello world!!!	
	</p>
</body>
</html>